<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar left-text="返回" left-arrow>
      <router-link to="/" slot="left">返回</router-link>
    </van-nav-bar>

    <!-- 头像 -->
    <div class="rect">
      <div>
        <img
          :src="imageSrc"
          style="height: 100px; width: 100px; border-radius: 50%"
        />
        <!-- 用于展示所选择的图片 -->
        <input type="file" v-on:change="test()" ref="fileInput" />
        <!-- 选择文件 -->
      </div>
    </div>

    <!-- 四个小块 -->
    <van-grid>
      <van-grid-item icon="certificate" dot text="立即签到" />
      <van-grid-item icon="gift-o" badge="2" text="我的福利" />
      <van-grid-item icon="clock-o" text="浏览历史" />
      <van-grid-item icon="shop-o" text="积分商城" />
    </van-grid>

    <!-- 四个跳转 -->
    <van-cell-group>
      <van-cell title="宠物挂失" is-link to="index" />
      <van-cell title="宠物领养" is-link to="index" />
      <van-cell title="设置地址" is-link to="/addresslist" />
    </van-cell-group>

    <!-- 底部 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Test",
  methods: {
    test: function () {
      const file = this.$refs.fileInput.files[0];
      const fileReader = new FileReader();
      fileReader.onload = (temp) => {
        this.imageSrc = temp.target.result;
      };
      fileReader.readAsDataURL(file);
    },
  },

  data() {
    return {
      active: 0,
      imageSrc: "", // 图片地址
    };
  },
};
</script>

<style scoped>
.rect {
  border-color: aliceblue;
  padding: 20px;
  text-align: center;
  color: black;
}

input {
  border: 0;
  color: #fff;

  margin-left: 125px;
}
</style>
